<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="售后方式" prop="orderType">
        <el-select v-model="queryParams.orderType" placeholder="请选择售后方式" clearable>
          <el-option v-for="dict in dict.type.back_order_type" :key="dict.value" :label="dict.label"
            :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="退款状态" prop="backStatus">
        <el-select v-model="queryParams.backStatus" placeholder="请选择退款状态" clearable>
          <el-option v-for="dict in dict.type.back_status" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="订单编号" prop="orderSerial">
        <el-input v-model="queryParams.orderSerial" placeholder="请输入商品标题" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="退单编号" prop="backSerial">
        <el-input v-model="queryParams.backSerial" placeholder="请输入商品标题" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="店铺名称" prop="backStoreName">
        <el-input v-model="queryParams.backStoreName" placeholder="请输入店铺名称" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="用户id" prop="userId">
        <el-input v-model="queryParams.userId" placeholder="请输入用户id" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="申请时间">
        <el-date-picker v-model="dateRange" style="width: 240px" value-format="yyyy-MM-dd" type="daterange"
          range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button v-hasPermi="['store:orderhead:listAll']" type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" :data="productinfoList" @selection-change="handleSelectionChange" :max-height="tableHeight()">
      <el-table-column label="订单编号" align="left" prop="orderSerial" />
      <el-table-column label="退单编号" align="left" prop="backSerial" />
      <el-table-column label="店铺名称" align="left" prop="backStoreName" />
      <el-table-column label="申请时间" align="left" prop="crTime">
        <template slot-scope="scope">
          {{removeSeconds(scope.row.crTime)}}
        </template>
      </el-table-column>
      <el-table-column label="商品" align="left" prop="storeName" width="350">
        <template slot-scope="scope">
          <div style="display: flex;">
            <div style="width: 100px;height: 100px;">
              <el-image style="width: 100px; height: 100px" :src="scope.row.backMainPic"
                :preview-src-list="[scope.row.backMainPic]" fit="contain"></el-image>
            </div>
            <div
              style="width: 250px;display: flex;flex-direction:column;justify-content: center;padding-left: 10px;padding-right: 20px;box-sizing: border-box;">
              <div>
                <el-tooltip class="item" effect="dark" placement="top" :content="scope.row.backProductName">
                  <div class="cell-ellipsis">{{ scope.row.backProductName }}</div>
                </el-tooltip>
              </div>
              <div><el-tooltip class="item" effect="dark" placement="top" :content="scope.row.backSpecification">
                  <div class="cell-ellipsis">{{ scope.row.backSpecification }}</div>
                </el-tooltip></div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="商品数量" align="center" prop="backProductNum" >
      <template slot-scope="scope">
            <span>x{{scope.row.backProductNum}}</span>
        </template>
      </el-table-column>
      <el-table-column label="实付金额" align="center" prop="realAmount">
        <template slot-scope="scope">
          <span style="font-weight: bold;color: #f00;">¥{{scope.row.realAmount}}</span>
        </template>
      </el-table-column>
      <el-table-column label="退款金额" align="center" prop="realAmount">
        <template slot-scope="scope">
          <span style="font-weight: bold;color: #f00;">¥{{scope.row.realAmount}}</span>
        </template>
      </el-table-column>
      <el-table-column label="售后方式" align="center" prop="orderType">
        <template slot-scope="scope">
          <el-tag size="medium">
            <dict-tag :options="dict.type.back_order_type" :value="scope.row.orderType" />
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="售后原因" align="left" prop="backProductRemarks">
      </el-table-column>
      <el-table-column label="发货单号" align="left" prop="emsSerial">
      </el-table-column>
      <el-table-column label="发货物流" align="left" prop="emsCompany">
      </el-table-column>
      <el-table-column label="退款状态" align="center" prop="backStatus" width="150">
        <template slot-scope="scope">
          <el-tag size="medium">
            <dict-tag :options="dict.type.back_status" :value="scope.row.backStatus" />
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="备注" align="left" prop="backPic" width="250">
        <template slot-scope="scope">
          <div style="display: flex;">
            <div style="width: 100px;height: 100px;">
              <el-image v-if="scope.row.backPicList.length>0" style="width: 100px; height: 100px" :preview-src-list="scope.row.backPicList" :src="scope.row.backPicList[0]"
                 fit="contain"></el-image>
            </div>
            <div
              style="width: 150px;display: flex;flex-direction:column;justify-content: center;padding-left: 10px;padding-right: 20px;box-sizing: border-box;">
              <div>
                <el-tooltip class="item" effect="dark" placement="top" :content="scope.row.examRemark">
                  <div class="cell-ellipsis">{{ scope.row.examRemark }}</div>
                </el-tooltip>
              </div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column fixed="right" width="100" label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="handelDetail(scope.row)">详情</el-button>
          <el-button v-if="scope.row.backStatus==='0'" size="mini" type="text" @click="handelExam(scope.row)">审核</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getProductinfoNew" />
    <el-dialog :title="title" :visible.sync="dialogVisible" @close="close" width="50%">
      <div v-if="showDialog">
        <el-table :data="dialogParamsList">
          <el-table-column label="申请时间" align="left" prop="crTime">
          <template slot-scope="scope">
          {{removeSeconds(scope.row.crTime)}}
        </template>
      </el-table-column>
          <el-table-column label="实付金额" align="left" prop="realAmount" >
          <template slot-scope="scope">
          <span style="font-weight: bold;color: #f00;">¥{{scope.row.realAmount}}</span>
        </template>
      </el-table-column>
          <el-table-column label="退款金额" align="left" prop="refundAmount" >
          <template slot-scope="scope">
          <span style="font-weight: bold;color: #f00;">¥{{scope.row.refundAmount}}</span>
        </template>

      </el-table-column>
          <el-table-column label="售后方式" align="left" prop="orderType" >
          <template slot-scope="scope">
          <el-tag size="medium">
            <dict-tag :options="dict.type.back_order_type" :value="scope.row.orderType" />
          </el-tag>
        </template>
        </el-table-column>
          <el-table-column label="发货单号" align="left" prop="emsSerial" />
          <el-table-column label="发货物流" align="left" prop="emsCompany" />
          <el-table-column label="退款状态" align="left" prop="backStatus">
            <template slot-scope="scope">
              <el-tag size="medium">
                <dict-tag :options="dict.type.back_status" :value="scope.row.backStatus" />
              </el-tag>
            </template>
          </el-table-column>
        </el-table>
        <el-form :model="dialogParams" size="small" label-width="68px">
          <div style="margin-top: 20px;margin-bottom: 20px;font-weight: bold;font-size: 16px;">商品信息</div>
          <el-form-item label="商品标题" prop="backProductName">
            <el-input disabled v-model="dialogParams.backProductName"  />
          </el-form-item>
          <el-form-item label="商品规格" prop="backSpecification">
            <el-input disabled v-model="dialogParams.backSpecification"  />
          </el-form-item>
          <el-form-item label="商品数量" prop="backProductNum">
            <el-input disabled v-model="dialogParams.backProductNum"  />
          </el-form-item>
          <div style="margin-top: 20px;margin-bottom: 20px;font-weight: bold;;font-size: 16px;">售后信息</div>
          <el-form-item label="售后方式" prop="orderType">

            <el-select disabled v-model="dialogParams.orderType" placeholder="请选择售后方式" >
          <el-option v-for="dict in dict.type.back_order_type" :key="dict.value" :label="dict.label"
            :value="dict.value" />
        </el-select>

            <!-- <el-input disabled v-model="dialogParams.orderType" placeholder="商品标题" clearable /> -->
          </el-form-item>
          <el-form-item label="售后原因" prop="backProductRemarks">
            <el-input disabled v-model="dialogParams.backProductRemarks" />
          </el-form-item>
          <el-form-item label="售后描述" prop="backRemark">
            <el-input disabled v-model="dialogParams.backRemark" />
          </el-form-item>
          <el-form-item label="售后凭证" prop="backPic">
            <div style="display: flex;flex-wrap: wrap;">
              <div v-for="(item,index) in dialogParams.list" :key="index">
              <el-image style="width: 200px; height: 100px" :preview-src-list="dialogParams.list" :src="item"
                fit="contain"></el-image>
            </div>
            </div>
          </el-form-item>
          <div v-if="isView==='01'&&dialogParams.backStatus==='2'" style="margin-top: 20px;margin-bottom: 20px;font-weight: bold;font-size: 16px;">拒绝原因</div>
          <el-form-item v-if="isView==='01'&&dialogParams.backStatus==='2'" label="拒绝原因" prop="examRemark">
            <el-input disabled v-model="dialogParams.examRemark" placeholder="拒绝原因" clearable />
          </el-form-item>
          <el-form-item v-if="isView==='01'&&dialogParams.backStatus==='2'" label="拒绝凭证" prop="examPic">
            <div style="display: flex;flex-wrap: wrap;">
              <div v-for="(item,index) in dialogParams.Refuselist" :key="index">
              <el-image style="width: 200px; height: 100px" :preview-src-list="dialogParams.Refuselist" :src="item"
                fit="contain"></el-image>
            </div>
            </div>

          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" style="text-align: center;">
          <el-popconfirm title="请注意，一旦您的退款申请获得批准，资金将直接退回到买家的账户中。" v-hasPermi="['store:chargeBack:editStatus']" @cancel="cancelExam()" @confirm="passExam()">
            <el-button slot="reference" v-hasPermi="['store:chargeBack:editStatus']" type="primary" v-show="isView==='02'">通过申请</el-button>
          </el-popconfirm>
          <el-button style="margin-left: 10px;" v-if="isView==='02'" v-hasPermi="['store:chargeBack:editStatus']" @click="refuseApply()">拒绝申请</el-button>
          <el-button v-if="isView==='01'" @click="dialogVisible = false">取 消</el-button>
        </div>
      </div>
    </el-dialog>
    <el-dialog title="拒绝" :visible.sync="refuseVisible" @close="cancelReject" width="30%">
      <!-- 拒绝原因 -->
      <!--拒绝凭证 -->
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px" class="demo-ruleForm">
        <el-form-item label="拒绝原因" prop="reasom">
          <el-col :span="8">
            <el-input v-model="ruleForm.reasom"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item>
          <span slot="label"><span style="color: #f56c6c;font-size: 14px;"></span>拒绝凭证</span>
          <el-upload style="width: 300px;" :limit="4" multiple :action="uploadUrl" :headers="headers"
            list-type="picture" :on-preview="handlePictureCardPreviewDetails" :on-remove="handleRemoveDetails"
            :on-success="handleSuccessDetails" :file-list="productPicDetailsList">
            <el-button :disabled="productPicDetailsList && productPicDetailsList.length>3 ? true : false" size="small"
              type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitReject('ruleForm')">确定</el-button>
          <el-button @click="cancelReject()">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  import {
    getToken
  } from "@/utils/auth";
  import {
    getBackOrderList,
    getBackEditStatusNew
  } from "@/api/store/orderhead";
  import {
    getProductinfoNew,
    productCodeEditDetails
  } from "@/api/store/productinfo";

  export default {
    name: "Productinfo",
    dicts: ['back_order_type', 'back_status'],
    data() {
      return {
        groundVisible: false, //上架
        offShelfVisible: false, //下架
        nestedTableData: [],
        dictArr: [{
            value: '0',
            label: '未生效'
          },
          {
            value: '1',
            label: '已生效'
          }
        ],
        tableData: [],
        editForm: {},
        dialogVisible: false,
        dialogTitle: '',
        tabPosition: 'left',
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 商品类目表格数据
        productinfoList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          orderType: '',
          backStatus:'',
          orderSerial:'',
          backSerial:'',
          backStoreName: '',
          userId:''
        },
        // 表单参数
        form: {},
        fileListN: [],
        listNew: [],
        // 表单校验
        rules: {
          reasom: [{
            required: true,
            message: '请输入拒绝原因',
            trigger: 'change'
          }, ],
        },
        allList: [],

        addressXz: [],
        propsObj: {
          label: 'text',
          value: 'value',
          option: 'children',
        },
        dialogParams: {},
        dialogParamsList: [],
        dateRange: [],
        showDialog: false,
        isView: '', //  01 查看 02 审核
        refuseVisible: false,
        ruleForm: {

        },
        uploadUrl: process.env.VUE_APP_BASE_API + "/file/upload/oss", // 上传的图片服务器地址
        headers: {
          Authorization: "Bearer " + getToken()
        },
        productPicDetailsList: []
      };
    },
    created() {
      this.getProductinfoNew()
    },
    methods: {
      refuseApply() {
        this.refuseVisible = true
      },
      tableHeight() {
        return document.body.clientHeight - 280;
      },
      getList() {

      },
      getProductinfoNew() {
        let params = {
          pageNum: this.queryParams.pageNum,
          pageSize: this.queryParams.pageSize,
          orderType: this.queryParams.orderType,
          backStatus: this.queryParams.backStatus,
          orderSerial: this.queryParams.orderSerial,
          backSerial: this.queryParams.backSerial,
          backStoreName: this.queryParams.backStoreName,
          userId: this.queryParams.userId,
        }
        // 回显规格接口
        getBackOrderList(this.addDateRange(params, this.dateRange)).then(response => {
          if (response.code == '200') {
            this.productinfoList = response.data;
            this.productinfoList.map(item => {
              let value = item.examPic ? item.examPic.split(',') : []
              item.backPicList = value
            })
            this.total = response.total;
            this.loading = false;
          }
        });
      },
      cancel() {
        this.open = false;
        this.reset();
      },
      getPreviewSrcList(data){
        return [data.backPic]
      },
      // 表单重置
      reset() {
        this.form = {
          storeName: '',
          productCode: '',
          productFlag: '',
          productName: '',
        };
        this.resetForm("form");
        this.xlsFile = [];
        this.fileListN = [];
        this.listNew = [];
        this.tableData = []

      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getProductinfoNew();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.productCode)
        this.single = selection.length !== 1
        this.multiple = !selection.length
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        this.open = true;
        this.title = "添加商品类目";
      },
      // 详情
      handelDetail(data) {
        this.showDialog = true
        this.dialogVisible = true
        this.title = '详情'
        this.isView = '01'
        this.dialogParams = {}
        this.dialogParams = data
        this.dialogParamsList = [this.dialogParams]
        this.dialogParams.list = this.dialogParams.backPic ? this.dialogParams.backPic.split(',') : ''
        this.dialogParams.Refuselist = this.dialogParams.examPic ? this.dialogParams.examPic.split(','): ''
      },
      // 审核
      handelExam(data) {
        this.showDialog = true
        this.dialogVisible = true
        this.isView = '02'
        this.title = '审核'
        this.dialogParams = {}
        this.dialogParams = data
        this.dialogParamsList = [this.dialogParams]
        this.dialogParams.list = this.dialogParams.backPic ? this.dialogParams.backPic.split(',') : ''
        this.dialogParams.Refuselist = this.dialogParams.examPic ? this.dialogParams.examPic.split(','): ''
      },
      close() {
        this.dialogVisible = false
        this.showDialog = false
      },
      getCurrentDateTime() {
        const now = new Date();
        const year = now.getFullYear();
        const month = (now.getMonth() + 1).toString().padStart(2, '0');
        const day = now.getDate().toString().padStart(2, '0');
        const hours = now.getHours().toString().padStart(2, '0');
        const minutes = now.getMinutes().toString().padStart(2, '0');
        const seconds = now.getSeconds().toString().padStart(2, '0');

        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
      },
      passExam() {
        let backStatus = ''
        let productBackStatus = ''
        if (this.dialogParams.orderType === '0') {
          console.log('仅退款')
          backStatus = '1'
          productBackStatus = '1'
        } else if (this.dialogParams.orderType === '1') {
          console.log('退货退款')
          backStatus = '1'
          productBackStatus = '1'
        } else {}
        let params = {
          "backSerial": this.dialogParams.backSerial ? this.dialogParams.backSerial : '', //退单单号
          "orderSerial": this.dialogParams.orderSerial ? this.dialogParams.orderSerial : '', //原订单单号
          "refundAmount": this.dialogParams.refundAmount ? this.dialogParams.refundAmount : '', //退款金额
          "realAmount": this.dialogParams.realAmount ? this.dialogParams.realAmount : '', //实际退款金额
          "backStatus": backStatus, //退单状态 0-默认 1-商家通过 2-商家拒绝 3-退款成功  4-部分退款 5 等待商家退款 6、交易关闭 7.退款拒绝
          // 通过审核的时候这两个传啥
          "examRemark": '', //审核备注
          "examPic": '', //驳回图片
          "orderType": this.dialogParams.orderType, //订单类型(0-退款 1-退款退货)
          "upTime": this.getCurrentDateTime(), //更新时间
          "inventoryId": this.dialogParams.inventoryId ? this.dialogParams.inventoryId : '',
          "productBackStatus": productBackStatus, //
          "backProductRemarks": this.dialogParams.backProductRemarks ? this.dialogParams.backProductRemarks : '',
          "backProductCode": this.dialogParams.backProductCode ? this.dialogParams.backProductCode : '',
          "backProductName": this.dialogParams.backProductName ? this.dialogParams.backProductName : '',
          "backProductNum": this.dialogParams.backProductNum ? this.dialogParams.backProductNum : '',
          "backSpecification": this.dialogParams.backSpecification ? this.dialogParams.backSpecification : '',
          "salePrice": this.dialogParams.salePrice ? this.dialogParams.salePrice : '' //  没有 返回值
        }

        getBackEditStatusNew(params).then(response => {
          if (response.code == '200') {
          this.dialogVisible = false
          this.queryParams.pageNum = 1
          this.queryParams.pageSize = 10
          this.getProductinfoNew()
          }
        });
      },
      cancelExam() {
        console.log('点击了取消')
      },
      submitReject(formName) {
        var imageParams = this.productPicDetailsList.map(v => v.response.data[0].url)
        var imageStr = ''
        if (imageParams.length > 0) {
          imageStr = imageParams.join(',')
        }
        let backStatus = ''
        let productBackStatus = ''
        if (this.dialogParams.orderType === '0') {
          console.log('仅退款')
          backStatus = '2'
          productBackStatus = ''
        } else if (this.dialogParams.orderType === '1') {
          console.log('退货退款')
          backStatus = '2'  //7
          productBackStatus = '2'   //5
        } else {}
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let params = {
              "backSerial": this.dialogParams.backSerial ? this.dialogParams.backSerial : '', //退单单号
              "orderSerial": this.dialogParams.orderSerial ? this.dialogParams.orderSerial : '', //原订单单号
              "refundAmount": this.dialogParams.refundAmount ? this.dialogParams.refundAmount : '', //退款金额
              "realAmount": this.dialogParams.realAmount ? this.dialogParams.realAmount : '', //实际退款金额
              "backStatus": backStatus, //退单状态 0-默认 1-商家通过 2-商家拒绝 3-退款成功  4-部分退款 5 等待商家退款 6、交易关闭 7.退款拒绝
              "examRemark": this.ruleForm.reasom ? this.ruleForm.reasom : '', //审核备注
              "examPic": imageStr, //驳回图片
              "orderType": this.dialogParams.orderType ? this.dialogParams.orderType : '', //订单类型(0-退款 1-退款退货)
              "upTime": this.getCurrentDateTime(), //更新时间
              "inventoryId": this.dialogParams.inventoryId ? this.dialogParams.inventoryId : '',
              "productBackStatus": productBackStatus, //
              "backProductRemarks": this.dialogParams.backProductRemarks ? this.dialogParams.backProductRemarks : '',
              "backProductCode": this.dialogParams.backProductCode ? this.dialogParams.backProductCode : '',
              "backProductName": this.dialogParams.backProductName ? this.dialogParams.backProductName : '',
              "backProductNum": this.dialogParams.backProductNum ? this.dialogParams.backProductNum : '',
              "backSpecification": this.dialogParams.backSpecification ? this.dialogParams.backSpecification : '',
              "salePrice": this.dialogParams.salePrice ? this.dialogParams.salePrice : '' //  没有 返回值
            }

            getBackEditStatusNew(params).then(response => {
              if (response.code == '200') {
                this.dialogVisible = false
                this.refuseVisible = false
                this.queryParams.pageNum = 1
                this.queryParams.pageSize = 10
                this.getProductinfoNew()
              }
            });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      cancelReject() {
        this.refuseVisible=false
        this.productPicDetailsList = []
        this.ruleForm.reasom = ''
      },

      // 商品详情页主图
      handlePictureCardPreviewDetails(file, fileList) {
        console.log(file, fileList);
      },
      handleRemoveDetails(file, fileList) {
        this.productPicDetailsListDel.push(file)
        this.productPicDetailsList = fileList
      },
      handleSuccessDetails(response, file, fileList) {
        this.productPicDetailsList = fileList
      },
    }
  };
</script>
<style scoped>
.mesSty {
    height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* align-items: center; */
  }
  .cell-ellipsis {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: left;
  }
  /* .cell-ellipsis {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: left;
  }

  .multi-line-text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    max-height: 3.0em;
  }

  .cellClassName {
    color: brown;
    font-weight: bold;
  }

  .image-list {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    display: flex;
    flex-wrap: wrap;

    li {
      width: 150px;
      height: 150px;
      margin-right: 3%;
      position: relative;

      span {
        position: absolute;
        right: 0px;
        top: 0px;
        cursor: pointer;
      }
    }
  } */
</style>
